import React, { PureComponent } from 'react';
import {
  Row, Col, Form, Input, Select, Icon, Dropdown, InputNumber, DatePicker, Modal, message,
  Table, Alert, Badge, Divider, Card, Menu, Button, Popconfirm, Collapse, Carousel, Tree, Upload,
} from 'antd';
import { connect } from 'dva';
import styles from './SystemRoleAuth.less';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import reqwest from 'reqwest';
// import Qiniu from 'qiniu-js';

const FormItem = Form.Item;
const TreeNode = Tree.TreeNode;
const Panel = Collapse.Panel;

@Form.create()
@connect(state => ({
  modelState: state.systemRoleAuth,
}))
export default class SystemRoleAuth extends PureComponent {
  state = {
    fileList1: [],
    uploading: false,

    previewVisible: false,
    previewImage: '',
    fileList: [{
      uid: -1,
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }],

  }



  handleUpload = () => {
    const { fileList1 } = this.state;
    const formData = new FormData();
    fileList1.forEach((file) => {
      formData.append('files[]', file);
    });

    formData.append('token', 'UiLG31oOXREERCT6rd-ubOgdtfoTmu1tEBmQpC4D:zerMNCr-7HZZmbxhCRugKlS0PeY=:eyJzY29wZSI6ImFpcWlhbnFpYW4iLCJyZXR1cm5Cb2R5Ijoie1wia2V5XCI6XCIkKGtleSlcIixcImhhc2hcIjpcIiQoZXRhZylcIixcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJmc2l6ZVwiOiQoZnNpemUpfSIsImRlYWRsaW5lIjoxNTEzNjcyOTU2fQ==');
    formData.append('key', 'bbb.png');
    formData.append('file', {
      type: 'image/jpeg',
      uri: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      name: 'bbb.png',
    });

    this.setState({
      uploading: true,
    });

    // qiniu.uploader({
    //   runtimes: 'html5,flash,html4',      // 上传模式，依次退化
    //   browse_button: 'pickfiles',         // 上传选择的点选按钮，必需
    //   // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
    //   // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
    //   // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
    //   // uptoken : '<Your upload token>', // uptoken是上传凭证，由其他程序生成
    //   uptoken_url: 'http://localhost:8080/api/qiniu/token',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
    //   // uptoken_func: function(){    // 在需要获取uptoken时，该方法会被调用
    //   //    // do something
    //   //    return uptoken;
    //   // },
    //   get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
    //   // downtoken_url: '/downtoken',
    //   // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
    //   // unique_names: true,              // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
    //   // save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
    //   domain: '<Your bucket domain>',     // bucket域名，下载资源时用到，必需
    //   container: 'container',             // 上传区域DOM ID，默认是browser_button的父元素
    //   max_file_size: '100mb',             // 最大文件体积限制
    //   flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash，相对路径
    //   max_retries: 3,                     // 上传失败最大重试次数
    //   dragdrop: true,                     // 开启可拖曳上传
    //   drop_element: 'container',          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
    //   chunk_size: '4mb',                  // 分块上传时，每块的体积
    //   auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
    //   //x_vars : {
    //   //    查看自定义变量
    //   //    'time' : function(up,file) {
    //   //        var time = (new Date()).getTime();
    //   // do something with 'time'
    //   //        return time;
    //   //    },
    //   //    'size' : function(up,file) {
    //   //        var size = file.size;
    //   // do something with 'size'
    //   //        return size;
    //   //    }
    //   //},
    //   init: {
    //     'FilesAdded': function (up, files) {
    //       plupload.each(files, function (file) {
    //         // 文件添加进队列后，处理相关的事情
    //       });
    //     },
    //     'BeforeUpload': function (up, file) {
    //       // 每个文件上传前，处理相关的事情
    //     },
    //     'UploadProgress': function (up, file) {
    //       // 每个文件上传时，处理相关的事情
    //     },
    //     'FileUploaded': function (up, file, info) {
    //       // 每个文件上传成功后，处理相关的事情
    //       // 其中info.response是文件上传成功后，服务端返回的json，形式如：
    //       // {
    //       //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
    //       //    "key": "gogopher.jpg"
    //       //  }
    //       // 查看简单反馈
    //       // var domain = up.getOption('domain');
    //       // var res = parseJSON(info.response);
    //       // var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
    //     },
    //     'Error': function (up, err, errTip) {
    //       //上传出错时，处理相关的事情
    //     },
    //     'UploadComplete': function () {
    //       //队列文件处理完毕后，处理相关的事情
    //     },
    //     'Key': function (up, file) {
    //       // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
    //       // 该配置必须要在unique_names: false，save_key: false时才生效
    //       var key = "";
    //       // do something with key here
    //       return key
    //     }
    //   }
    // })

    // You can use any AJAX library you like
    reqwest({
      url: 'http://upload.qiniu.com/',
      method: 'post',
      processData: false,
      data: formData,
      success: (result) => {
        this.setState({
          fileList1: [],
          uploading: false,
        });
        message.success('upload successfully.');
      },
      error: (result) => {
        this.setState({
          uploading: false,
        });
        message.error('upload failed.');
      },
    });
  }

  clickBtn = () => {
    //
  }


  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({ fileList }) => this.setState({ fileList })



  render() {
    const { uploading } = this.state;
    const props = {
      action: 'http://upload.qiniu.com/',
      onRemove: (file) => {
        this.setState(({ fileList1 }) => {
          const index = fileList1.indexOf(file);
          const newFileList = fileList1.slice();
          newFileList.splice(index, 1);
          return {
            fileList1: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList1 }) => ({
          fileList1: [...fileList1, file],
        }));
        return false;
      },
      fileList1: this.state.fileList1,
    };


    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );


    return (
      <div>
        <div className="clearfix">
          <Upload
            action="http://upload.qiniu.com/"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
            data={{ token: 'UiLG31oOXREERCT6rd-ubOgdtfoTmu1tEBmQpC4D:G0puta9CjCtpoX_a2Ko8tcKpr5s=:eyJzY29wZSI6ImFpcWlhbnFpYW4iLCJyZXR1cm5Cb2R5Ijoie1wia2V5XCI6XCIkKGtleSlcIixcImhhc2hcIjpcIiQoZXRhZylcIixcImJ1Y2tldFwiOlwiJChidWNrZXQpXCIsXCJmc2l6ZVwiOiQoZnNpemUpfSIsImRlYWRsaW5lIjoxNTEzNjc2Njg3fQ==' }}
          >
            {fileList.length >= 3 ? null : uploadButton}
          </Upload>
          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </div>


        <div>
          <Upload {...props}>
            <Button>
              <Icon type="upload" /> Select File
          </Button>
          </Upload>
          <Button
            className="upload-demo-start"
            type="primary"
            onClick={this.handleUpload}
            disabled={this.state.fileList1.length === 0}
            loading={uploading}
          >
            {uploading ? 'Uploading' : 'Start Upload'}
          </Button>

          <Button onClick={this.clickBtn} >
          </Button>
        </div>
      </div>
    );
  }
}
